export const toggleFullscreen = (): void => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().then(() => {
      showFullscreenMessage()
      hideFullscreenButton()
    })
  } else {
    document.exitFullscreen()
  }
}

export const showFullscreenMessage = (): void => {
  const message = document.createElement('div')
  message.className = 'fullscreen-message'
  message.innerHTML = '按ESC键可退出全屏模式'
  document.body.appendChild(message)

  setTimeout(() => {
    if (document.body.contains(message)) {
      document.body.removeChild(message)
    }
  }, 3000)
}

export const hideFullscreenButton = (): void => {
  const button = document.querySelector('.fullscreen-button')
  if (button) {
    (button as HTMLElement).style.display = 'none'
  }
}

export const showFullscreenButton = (): void => {
  const button = document.querySelector('.fullscreen-button')
  if (button) {
    (button as HTMLElement).style.display = 'block'
  }
}

export const setupFullscreenListeners = (): void => {
  // 监听全屏状态变化
  document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
      hideFullscreenButton()
    } else {
      showFullscreenButton()
    }
  })

  // 监听ESC键退出全屏
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && document.fullscreenElement) {
      document.exitFullscreen()
    }
  })
}